<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 300px;
            height: 300px;
            background: red;
        }

        .middle {
            width: 200px;
            height: 200px;
            background: blue;
        }

        .inner {
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>
    <script>
        // 阻止事件的传播 1.阻止捕获 2.阻止冒泡
        // 阻止事件传播 ：
        /* 
            方式一： e.stopPropagation();（用的多）
            方式二： e.cancelBubble =  true;
        */

        var outerEle = document.querySelector(".outer");
        var middleEle = document.querySelector(".middle");
        var innerEle = document.querySelector(".inner");
        outerEle.addEventListener("click",function(e){
            console.log("outer")
            // e.stopPropagation();
        })

        middleEle.addEventListener("click",function(e){
                console.log("middle")
                // e.stopPropagation();
                e.cancelBubble = true;
        })

        innerEle.addEventListener("click",function(e){
                console.log("inner");
                // e.stopPropagation();
                e.cancelBubble = true;
        })

    </script>
</body>

</html>